<template>
  <div class="advice-detail-container">
    <div class="advice-detail-card card">
      <!-- 返回按钮 -->
      <div class="back-navigation">
        <router-link to="/questions" class="back-link">← 返回问题列表</router-link>
      </div>
      
      <!-- 问题详情区域 -->
      <div class="question-section" v-if="currentQuestion">
        <h2>{{ currentQuestion.title }}</h2>
        <div class="question-meta">
          <span class="category-tag">{{ getCategoryName(currentQuestion.categoryId) }}</span>
          <span class="publish-time">发布时间: {{ formatDate(currentQuestion.publishTime) }}</span>
          <span class="view-count">浏览: {{ currentQuestion.viewCount }}</span>
        </div>
        <div class="question-content">
          {{ currentQuestion.content }}
        </div>
      </div>
      
      <!-- 专家信息 -->
      <div class="advisor-section">
        <div class="advisor-header">
          <div class="advisor-avatar">{{ advice.advisor.name.charAt(0) }}</div>
          <div class="advisor-info">
            <h2>{{ advice.advisor.name }}</h2>
            <p class="advisor-title">{{ advice.advisor.title }}</p>
            <div class="advisor-rating">
              <span class="rating-tag">{{ advice.rating }}分</span>
              <span class="rating-count">评分基于 {{ advice.ratingCount || 50 }} 次评价</span>
            </div>
          </div>
        </div>
        
        <div class="advisor-bio">
          <p>{{ getAdvisorBio(advice.advisor.name) }}</p>
        </div>
      </div>
      
      <!-- 建议内容 -->
      <div class="advice-content-section">
        <h3>专业建议</h3>
        <div class="advice-content">
          <p>{{ advice.content }}</p>
        </div>
        
        <!-- 建议要点 -->
        <div class="advice-tips" v-if="getAdviceTips(advice.id).length > 0">
          <h4>核心建议要点：</h4>
          <ul>
            <li v-for="(tip, index) in getAdviceTips(advice.id)" :key="index">
              {{ tip }}
            </li>
          </ul>
        </div>
        
        <!-- 适用场景 -->
        <div class="advice-scenario">
          <h4>适用场景：</h4>
          <p>{{ getAdviceScenario(advice.id) }}</p>
        </div>
        
        <!-- 额外资源 -->
        <div class="additional-resources">
          <h4>推荐资源：</h4>
          <ul class="resource-list">
            <li v-for="(resource, index) in getAdditionalResources(advice.id)" :key="index">
              <a href="#" @click.prevent class="resource-link">{{ resource }}</a>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- 互动区域 -->
      <div class="interaction-section">
        <div class="action-buttons">
          <button class="btn btn-primary like-button">
            ❤️ 点赞 ({{ advice.likes }})
          </button>
          <button class="btn btn-secondary bookmark-button">
            📑 收藏
          </button>
          <button class="btn btn-secondary share-button">
            🔗 分享
          </button>
        </div>
        
        <!-- 评论区域 -->
        <div class="comments-section">
          <h4>用户评论 ({{ comments.length }})</h4>
          <div class="comment-list">
            <div v-for="comment in comments" :key="comment.id" class="comment-item">
              <div class="comment-header">
                <span class="comment-author">{{ comment.author }}</span>
                <span class="comment-time">{{ comment.time }}</span>
              </div>
              <p class="comment-content">{{ comment.content }}</p>
              <div class="comment-actions">
                <button class="comment-like">👍 {{ comment.likes }}</button>
                <button class="comment-reply">💬 回复</button>
              </div>
            </div>
          </div>
          
          <!-- 添加评论 -->
          <div class="add-comment">
            <textarea 
              v-model="newComment" 
              placeholder="分享你的感受或疑问..."
              class="comment-input"
            ></textarea>
            <button class="btn btn-primary submit-comment">提交评论</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 相关建议 -->
    <div class="related-advices-section">
      <h3>相关专业建议</h3>
      <div class="related-advices-list">
        <router-link 
          v-for="related in relatedAdvices" 
          :key="related.id" 
          :to="`/advice-detail/${related.id}`"
          class="related-advice-link"
        >
          <div class="related-advice-card card">
            <div class="related-advisor-info">
              <span class="related-advisor-name">{{ related.advisor.name }}</span>
              <span class="related-rating">{{ related.rating }}分</span>
            </div>
            <p class="related-advice-preview">{{ truncateText(related.content, 100) }}</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdviceDetailView',
  data() {
    return {
      newComment: '',
      advice: {
        id: parseInt(this.$route.params.id),
        content: '',
        advisor: {
          name: '',
          title: ''
        },
        rating: 0,
        likes: 0
      },
      comments: [],
      relatedAdvices: [],
      currentQuestion: null,
      // 问题数据
      questions: [
        {
          id: 1,
          title: '如何处理分手后的痛苦？',
          summary: '我和男朋友分手已经一个月了，但还是无法走出痛苦，每天都在回忆过去的美好时光...',
          content: '我和男朋友分手已经一个月了，但还是无法走出痛苦，每天都在回忆过去的美好时光。我知道应该向前看，但情绪总是反复，有时候会突然很沮丧，有时候又觉得可以释怀。我尝试过和朋友倾诉，也试过让自己忙碌起来，但效果都不持久。我该如何真正走出这段阴霾？',
          categoryId: 2,
          adviceCount: 12,
          viewCount: 543,
          publishTime: '2024-01-15'
        },
        {
          id: 2,
          title: '恋爱中如何保持个人空间？',
          summary: '我和女友恋爱半年了，她总是希望时刻和我在一起，我感到有些窒息，该如何平衡？',
          content: '我和女友恋爱半年了，关系一直很好，但最近我感到有些压力。她希望我们几乎每天都见面，经常要求我随时汇报行踪，即使我在工作或和朋友相处时。我理解她的依赖，但我也需要自己的空间来做喜欢的事情、和朋友聚会或者独处。我担心直接沟通会让她觉得我不够爱她，但这种窒息感已经影响到我的情绪了。',
          categoryId: 1,
          adviceCount: 8,
          viewCount: 321,
          publishTime: '2024-01-18'
        },
        {
          id: 3,
          title: '如何判断对方是否真的爱你？',
          summary: '我不确定男朋友是否真的爱我，他很少表达感情，但在行动上还算关心我...',
          content: '我和男朋友在一起快一年了，但我经常怀疑他对我的感情深度。他很少说"我爱你"这样的话，也不太喜欢在公共场合表现亲密。不过，他会记得我的生理期，在我生病时照顾我，也会主动承担约会的费用。我看到身边朋友的男朋友都很浪漫，经常送花送礼物，这让我很困惑，是不是他其实没那么喜欢我？',
          categoryId: 1,
          adviceCount: 15,
          viewCount: 789,
          publishTime: '2024-01-20'
        },
        {
          id: 4,
          title: '婚姻中如何保持新鲜感？',
          summary: '结婚三年了，感觉生活越来越平淡，我们之间的话题也越来越少，该怎么办？',
          content: '我和丈夫结婚三年，现在感觉生活越来越像例行公事。每天下班后各自刷手机，周末要么在家发呆要么回父母家，很少有二人世界的活动。我们之间的话题也越来越少，除了工作和家庭琐事几乎没有其他交流。我担心这样下去会影响我们的感情，但又不知道该如何改变这种状态。',
          categoryId: 3,
          adviceCount: 10,
          viewCount: 456,
          publishTime: '2024-01-22'
        },
        {
          id: 5,
          title: '喜欢上了最好的朋友，该表白吗？',
          summary: '我暗恋了最好的朋友很久，但害怕表白后连朋友都做不成，我该怎么办？',
          content: '我有一个认识十年的异性好友，最近两年我发现自己对他的感情已经超出了友谊。我们几乎无话不谈，彼此都很了解对方，但我一直不敢表白，害怕如果被拒绝，连朋友都做不成。每次看到他和其他异性在一起我都会感到失落，但又不知道该如何处理这种复杂的感情。',
          categoryId: 4,
          adviceCount: 23,
          viewCount: 876,
          publishTime: '2024-01-25'
        }
      ],
      // 分类数据
      categories: [
        { id: 0, name: '全部' },
        { id: 1, name: '恋爱关系' },
        { id: 2, name: '分手恢复' },
        { id: 3, name: '婚姻家庭' },
        { id: 4, name: '暗恋表白' },
        { id: 5, name: '亲情友情' }
      ]
    }
  },
  mounted() {
    this.loadAdviceDetail()
  },
  methods: {
    loadAdviceDetail() {
      // 获取URL参数中的问题ID
      const questionId = parseInt(this.$route.params.id)
      
      // 加载问题数据
      this.currentQuestion = this.questions.find(q => q.id === questionId)
      if (this.currentQuestion) {
        // 增加浏览次数
        this.currentQuestion.viewCount++
        
        // 加载建议数据 - 根据问题类别提供针对性建议
        const allAdvices = this.getAllAdvices()
        
        // 根据问题类别选择适合的建议
        let adviceId = null
        switch (this.currentQuestion.categoryId) {
          case 1: // 恋爱关系
            adviceId = 2
            break
          case 2: // 分手恢复
            adviceId = 1
            break
          case 3: // 婚姻家庭
            adviceId = 4
            break
          case 4: // 暗恋表白
            adviceId = 5
            break
          default:
            // 如果没有匹配的类别，选择爱的表达相关建议
            adviceId = 3
        }
        
        const adviceData = allAdvices.find(a => a.id === adviceId) || 
                         allAdvices[(questionId % allAdvices.length)]
        
        this.advice = adviceData
        this.comments = this.getCommentsForAdvice(adviceId)
        this.relatedAdvices = this.getRelatedAdvices(adviceId)
      } else {
        // 如果找不到当前问题，使用原有逻辑
        const adviceId = (questionId % this.getAllAdvices().length) + 1
        const adviceData = this.getAllAdvices().find(a => a.id === adviceId)
        
        if (adviceData) {
          this.advice = adviceData
          this.comments = this.getCommentsForAdvice(adviceId)
          this.relatedAdvices = this.getRelatedAdvices(adviceId)
        }
      }
    },
    // 获取分类名称
    getCategoryName(categoryId) {
      const category = this.categories.find(cat => cat.id === categoryId)
      return category ? category.name : '未知'
    },
    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    getAllAdvices() {
      // 返回所有建议数据
      return [
        {
          id: 1,
          content: '分手后的痛苦是正常的情绪反应，不要急于摆脱这种感受。给自己一些时间去体验和处理这些情绪。\n\n首先，我建议你尝试情绪日记法，每天花15-20分钟记录下你的情绪变化、触发因素以及当天的想法。这不仅能帮助你理清思路，还能让你逐渐识别情绪模式，更好地理解自己。\n\n其次，试着建立新的生活仪式感，比如培养一个新的爱好、尝试新的运动方式或者学习一项新技能。这些活动能帮你转移注意力，并在过程中重新发现自我价值。\n\n另外，社交支持在这个阶段至关重要。不要孤立自己，与信任的朋友和家人保持联系，分享你的感受。如果感到难以启齿，可以考虑加入线上支持小组，与有类似经历的人交流。\n\n最后，给自己设定合理的期望。治愈不是线性的过程，会有起伏是正常的。当你感到情绪低落时，试着对自己温柔一些，就像对待受伤的朋友一样。如果这些方法效果有限，建议寻求专业心理咨询师的帮助。',
          advisor: {
            name: '李心理咨询师',
            title: '资深情感咨询师'
          },
          rating: 4.8,
          likes: 24,
          ratingCount: 89
        },
        {
          id: 2,
          content: '在恋爱关系中，保持个人空间是完全正常且必要的需求，这并不意味着你不够爱对方。\n\n我建议你尝试"I-Statement"沟通法，用"我"开头表达你的感受，而不是指责对方。比如可以说"当我们几乎每天都见面时，我感到有些压力，需要一些个人空间来做自己喜欢的事情"，而不是"你总是要求每天见面，让我感到窒息"。\n\n接下来，尝试与女友共同设定边界。可以一起讨论并制定一个双方都能接受的相处计划，比如约定每周见面的频率、各自的独处时间，以及处理工作和社交场合时的联系方式。\n\n同时，也要理解女友的需求背后可能的情感。她的粘人行为可能源于安全感不足或者害怕失去你。尝试在给予彼此空间的同时，通过其他方式表达你的关心和爱意，比如更有质量的陪伴、更贴心的问候等。\n\n最后，记住健康的关系需要平衡亲密与独立。个人空间不仅不会破坏关系，反而能让彼此保持新鲜感，促进关系的健康发展。如果沟通困难，可以考虑一起参加情侣咨询，获取专业指导。',
          advisor: {
            name: '王情感专家',
            title: '婚姻与家庭治疗师'
          },
          rating: 4.6,
          likes: 18,
          ratingCount: 76
        },
        {
          id: 3,
          content: '爱的表达方式因人而异，不是所有人都擅长言语表达或浪漫行为。重要的是观察他的行动和对你的重视程度。\n\n心理学家Gary Chapman提出过"爱的五种语言"理论：肯定的言辞、精心的时刻、接受礼物、服务的行动和身体接触。每个人都有不同的主要爱的语言。你的男友可能更倾向于通过行动（记住生理期、照顾你、承担约会费用）来表达爱意，而不是言语或礼物。\n\n建议你可以尝试以下方法：1. 观察他在你真正需要帮助时的表现，患难见真情；2. 注意他是否尊重你的意见和感受；3. 看他是否愿意为你做出妥协和改变；4. 感受他是否把你纳入他的未来规划中。\n\n如果依然感到困惑，可以尝试与他坦诚沟通你的感受和需求，但要避免比较或指责。比如可以说"我知道你关心我，但有时候我也希望听到你说一些甜言蜜语"，而不是"为什么你不像别人的男朋友那样浪漫"。\n\n记住，每段关系都有其独特性，重要的是找到适合你们双方的表达方式，而不是套用他人的标准。',
          advisor: {
            name: '张心理医生',
            title: '临床心理学博士'
          },
          rating: 4.9,
          likes: 31,
          ratingCount: 120
        },
        {
          id: 4,
          content: '婚姻中的平淡期是很常见的现象，但也是需要积极应对的信号。\n\n首先，我建议你尝试"约会之夜"活动，每周安排一次专属两人的时间，可以是外出就餐、看电影、短途旅行，或者在家中准备一顿特别的晚餐。关键是要远离日常琐事的干扰，专注于彼此。\n\n其次，尝试创造新的共同体验。一起学习新技能、培养共同爱好，或者尝试从未做过的事情。新的体验能够刺激大脑产生多巴胺，同时创造新的共同回忆。\n\n另外，增加日常的情感连接。每天花15分钟进行"深度交流"，分享各自的想法、感受和梦想，而不仅仅是讨论家务和孩子。同时，不要忽视身体接触，如拥抱、亲吻和牵手等简单的亲密动作。\n\n也可以尝试一起阅读婚姻相关的书籍，如《爱的五种语言》或《幸福的婚姻》，然后讨论书中的观点如何应用到你们的关系中。\n\n最后，如果感到关系疏离严重，不要犹豫寻求专业婚姻咨询师的帮助。有时候，第三方的专业视角能够帮助你们打破僵局，重新建立连接。记住，保持婚姻的新鲜感需要双方共同努力和持续投入。',
          advisor: {
            name: '陈婚姻顾问',
            title: '婚姻家庭咨询师'
          },
          rating: 4.7,
          likes: 27,
          ratingCount: 95
        },
        {
          id: 5,
          content: '暗恋好友是一种复杂而微妙的情感状态，需要谨慎处理。\n\n首先，建议你花时间认真思考这段感情的性质。区分是真正的浪漫吸引，还是对亲密友谊的误读。问自己：如果表白失败，你是否能够接受可能的关系变化？如果保持现状，你是否能够平静地继续做朋友？\n\n接下来，可以尝试通过一些间接方式测试对方的态度。例如，轻松地讨论关于友情和爱情的话题，观察他对朋友发展为恋人的看法；或者分享你对理想伴侣的想法，看他是否会对号入座。\n\n如果决定表白，选择一个私密且轻松的环境，避免在酒精或情绪激动的状态下进行。使用直接但尊重的方式表达，例如："我很珍惜我们的友谊，但最近我发现自己对你的感情可能超出了友谊，我想告诉你，因为我觉得这很重要，无论结果如何，我希望我们能坦诚相对。"\n\n做好接受任何结果的准备。如果他也有同样的感觉，可以建议给彼此一些时间适应关系的变化；如果他没有，给自己一些空间处理失落感，同时尊重他的感受。\n\n记住，无论结果如何，你的感受都是有价值的，勇敢表达需要很大的勇气。无论选择表白还是保持现状，最重要的是对自己诚实，并尊重对方的选择。',
          advisor: {
            name: '林情感教练',
            title: '人际关系专家'
          },
          rating: 4.8,
          likes: 34,
          ratingCount: 112
        }
      ]
    },
    getAdvisorBio(advisorName) {
      const bios = {
        '李心理咨询师': '李老师拥有10年情感咨询经验，专注于帮助来访者处理分手创伤、情绪管理和个人成长。擅长运用认知行为疗法和叙事疗法，帮助来访者重新构建积极的自我认知。',
        '王情感专家': '王老师是国家二级心理咨询师，婚姻家庭治疗师，专注于婚姻关系修复和家庭系统治疗。在情感危机干预和关系重建方面有着丰富的临床经验。',
        '张心理医生': '张博士是临床心理学专家，拥有心理学博士学位，曾在多家三甲医院心理科工作。擅长运用正念疗法和接纳与承诺疗法帮助来访者处理情绪困扰。',
        '陈婚姻顾问': '陈顾问拥有15年婚姻家庭咨询经验，是国内知名的婚姻治疗专家。专注于婚姻危机干预、伴侣沟通提升和婚姻保鲜技巧的研究与实践。',
        '林情感教练': '林教练是人际关系专家，情感教练，专注于个人情感成长、社交技能提升和情感表达训练。擅长通过实际案例和互动练习帮助来访者建立健康的人际关系模式。'
      }
      return bios[advisorName] || '该专家暂无详细介绍'
    },
    getAdviceTips(adviceId) {
      const tipsMap = {
        1: ['给自己时间悲伤，不要压抑情绪', '尝试情绪日记法，每天记录15-20分钟', '建立新的生活仪式感，培养新爱好', '保持社交联系，寻求亲友支持'],
        2: ['使用"I-Statement"沟通法表达感受', '与伴侣共同设定双方接受的边界', '理解对方粘人行为背后的情感需求', '在给予空间同时表达关心爱意'],
        3: ['识别伴侣的爱的语言表达方式', '观察对方在关键时刻的表现', '注意对方是否尊重你的意见和感受', '尝试与对方坦诚但非指责性的沟通'],
        4: ['建立每周"约会之夜"，创造二人世界', '尝试新的共同体验，创造新回忆', '每天安排15分钟"深度交流"时间', '注重日常身体接触，保持情感连接'],
        5: ['认真思考这段感情的性质和可能后果', '通过间接方式测试对方态度', '选择私密轻松环境表白，避免情绪激动', '做好接受任何结果的心理准备']
      }
      return tipsMap[adviceId] || []
    },
    getAdviceScenario(adviceId) {
      const scenarios = {
        1: '适用于分手初期情绪波动较大，无法专注于日常生活的人群。特别是那些倾向于压抑情绪或过度沉迷于回忆的人。',
        2: '适用于在恋爱关系中感到个人空间被侵犯，希望建立健康边界但又担心伤害对方感情的人群。',
        3: '适用于对伴侣爱的表达方式存在困惑，不确定对方是否真的关心自己，或者希望改善彼此情感沟通的人群。',
        4: '适用于婚姻进入平淡期，感到关系疏离，希望重燃激情但不知如何开始的夫妻。特别适合长期相处后缺乏有效沟通的伴侣。',
        5: '适用于暗恋好友，感到情感矛盾，既想表达又害怕破坏友谊，处于犹豫不决状态的人群。'
      }
      return scenarios[adviceId] || '该建议适用于大多数情感困扰的人群。'
    },
    getAdditionalResources(adviceId) {
      const resources = {
        1: ['《分手后的自我修复指南》电子书', '情绪管理冥想音频系列', '每周二晚上8点免费线上支持小组'],
        2: ['《非暴力沟通》关系沟通指南', '《界限感》电子书下载', '伴侣边界设定工作表模板'],
        3: ['《爱的五种语言》在线课程', '《如何判断真爱》心理学文章', '伴侣沟通风格测试'],
        4: ['《幸福的婚姻》推荐阅读', '婚姻保鲜30天挑战计划', '夫妻深度交流话题清单'],
        5: ['《从朋友到恋人》情感指南', '表白前心理准备音频指导', '人际关系处理技巧课程']
      }
      return resources[adviceId] || ['《情感修复手册》通用资源', '免费心理咨询预约服务']
    },
    getCommentsForAdvice(adviceId) {
      // 模拟评论数据
      const allComments = {
        1: [
          { id: 1, author: '心灵旅行者', content: '感谢李老师的建议，写日记真的帮助我理清了很多情绪。', time: '3天前', likes: 5 },
          { id: 2, author: '正在努力的小鱼', content: '建立新习惯这一点很有用，我开始学习瑜伽，感觉好了很多。', time: '1周前', likes: 3 },
          { id: 3, author: '阳光总在风雨后', content: '给自己时间真的很重要，之前总是逼自己快点好起来，反而更痛苦。', time: '2周前', likes: 8 }
        ],
        2: [
          { id: 4, author: '寻找平衡的我', content: '"I-Statement"沟通法太有用了！用这种方式和女友交流后，她终于理解了我的感受。', time: '2天前', likes: 12 },
          { id: 5, author: '需要空间的旅人', content: '设定边界后，我们的关系反而更好了，彼此都更珍惜相处的时间。', time: '1周前', likes: 9 },
          { id: 6, author: '沟通达人', content: '共同设定规则这一点很重要，避免了很多猜测和误解。', time: '3天前', likes: 6 }
        ],
        3: [
          { id: 7, author: '爱的探索者', content: '了解"爱的五种语言"后，我终于明白男朋友是在用行动表达爱，虽然不浪漫但很实在。', time: '5天前', likes: 15 },
          { id: 8, author: '情感小白', content: '观察关键时刻表现这一点很准，上次我生病时他的照顾让我确信他是真的关心我。', time: '1周前', likes: 8 },
          { id: 9, author: '学会接纳', content: '不再拿自己的关系和别人比较后，我变得更快乐了。每段关系都有自己的节奏。', time: '2周前', likes: 11 }
        ],
        4: [
          { id: 10, author: '婚姻中的探索者', content: '"约会之夜"让我们找回了恋爱时的感觉！虽然只是简单的晚餐，但没有孩子和手机的打扰，感觉很不一样。', time: '3天前', likes: 18 },
          { id: 11, author: '重新连接', content: '15分钟深度交流很有效，我们开始分享更多内心的想法，而不只是生活琐事。', time: '1周前', likes: 14 },
          { id: 12, author: '平淡中的惊喜', content: '一起学习新技能真的很有趣！我们报名了烹饪课，现在周末一起做饭成了我们的新乐趣。', time: '4天前', likes: 12 }
        ],
        5: [
          { id: 13, author: '纠结的朋友', content: '思考清楚可能的后果后，我决定暂时保持现状，至少现在我们还是最好的朋友。', time: '2天前', likes: 9 },
          { id: 14, author: '勇敢表白者', content: '我按照建议表白了，结果出乎意料的好！我们现在在一起已经三个月了，关系比以前更好。', time: '1个月前', likes: 24 },
          { id: 15, author: '理性思考者', content: '间接测试对方态度的方法很实用，避免了尴尬的直接表白。', time: '5天前', likes: 11 },
          { id: 16, author: '接受现实', content: '表白被婉拒了，但我们还是朋友。给自己一些时间消化后，现在感觉好多了。谢谢建议。', time: '2周前', likes: 16 }
        ]
      }
      return allComments[adviceId] || []
    },
    getRelatedAdvices(adviceId) {
      const allAdvices = this.getAllAdvices()
      return allAdvices.filter(a => a.id !== adviceId).slice(0, 2)
    },
    truncateText(text, length) {
      return text.length > length ? text.substring(0, length) + '...' : text
    }
  }
}
</script>

<style scoped>
.advice-detail-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.advice-detail-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.back-navigation {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.back-link {
  color: #ff9a9e;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.back-link:hover {
  text-decoration: underline;
}

.question-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #eee;
}

.question-section h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.question-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  color: #666;
  font-size: 0.9rem;
}

.category-tag {
  background-color: #ff9a9e;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.question-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
  background-color: #fff9f8;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #ff9a9e;
}

.advisor-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #eee;
}

.advisor-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.advisor-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  flex-shrink: 0;
}

.advisor-info h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.advisor-title {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.advisor-rating {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rating-tag {
  background-color: #ffecd2;
  color: #f86d75;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-weight: 500;
}

.rating-count {
  color: #999;
  font-size: 0.9rem;
}

.advisor-bio {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #ff9a9e;
}

.advisor-bio p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.advice-content-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #eee;
}

.advice-content-section h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1.5rem;
}

.advice-content {
  margin-bottom: 2rem;
}

.advice-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
}

.advice-tips, .advice-scenario, .additional-resources {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.advice-tips h4, .advice-scenario h4, .additional-resources h4 {
  color: #ff9a9e;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.advice-tips ul {
  padding-left: 1.5rem;
  margin: 0;
}

.advice-tips li {
  color: #444;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.advice-scenario p {
  color: #444;
  line-height: 1.6;
  margin: 0;
}

.resource-list {
  padding-left: 1.5rem;
  margin: 0;
}

.resource-link {
  color: #ff9a9e;
  text-decoration: none;
  transition: color 0.3s ease;
}

.resource-link:hover {
  color: #f86d75;
  text-decoration: underline;
}

.interaction-section h4 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 1.5rem;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.like-button, .bookmark-button, .share-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comments-section {
  margin-top: 2rem;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.comment-item {
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.comment-author {
  font-weight: 500;
  color: #333;
}

.comment-time {
  color: #999;
  font-size: 0.9rem;
}

.comment-content {
  color: #444;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

.comment-actions {
  display: flex;
  gap: 1.5rem;
}

.comment-like, .comment-reply {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.3s ease;
}

.comment-like:hover, .comment-reply:hover {
  color: #ff9a9e;
}

.add-comment {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment-input {
  width: 100%;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  font-size: 1rem;
}

.comment-input:focus {
  outline: none;
  border-color: #ff9a9e;
  box-shadow: 0 0 0 2px rgba(255, 154, 158, 0.1);
}

.submit-comment {
  align-self: flex-end;
}

.related-advices-section {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.related-advices-section h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1.5rem;
}

.related-advices-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.related-advice-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}

.related-advice-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.related-advice-card {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 1.5rem;
  height: 100%;
  transition: all 0.3s ease;
}

.related-advice-link:hover .related-advice-card {
  background-color: #fff9f8;
  border-color: #ff9a9e;
}

.related-advisor-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.related-advisor-name {
  font-weight: 500;
  color: #333;
}

.related-rating {
  background-color: #ffecd2;
  color: #f86d75;
  padding: 0.2rem 0.6rem;
  border-radius: 15px;
  font-size: 0.9rem;
}

.related-advice-preview {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .advice-detail-container {
    padding: 1rem;
  }
  
  .advice-detail-card {
    padding: 1.5rem;
  }
  
  .advisor-header {
    flex-direction: column;
    text-align: center;
  }
  
  .advisor-avatar {
    align-self: center;
  }
  
  .action-buttons {
    flex-wrap: wrap;
  }
  
  .related-advices-list {
    grid-template-columns: 1fr;
  }
}
</style>